<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> 税收收入完成情况</title>
    <link rel="stylesheet" href="/index/css/bootstrap.css">
    <link rel="stylesheet" href="/index/css/Reset.css">
    <!-- 页面css -->
    <link rel="stylesheet" href="/index/css/indicators/indicators.css">
    <style>
        .last-year > p:first-child,
        .growth-rate > p:first-child,
        .accounted-rate > p:first-child {
            font-size: 18px;
            margin-bottom: 10px;

        }

        .growth-rate > p:last-child,
        .last-year > p:last-child,
        .accounted-rate > p:last-child {
            font-size: 20px;
            color: #EAAD0E;
        }

        .legend-content {
            margin-top: 20px;
        }

        .legend-content em {
            font-size: 16px;
            color: #EAAD0E;
        }

        .legend-content p {
            font-size: 14px;
        }

        .legend-item {
            background: rgba(0, 163, 157, .3);
            border-radius: 8px;
            margin: 15px 30px;
            padding: 10px;
            cursor: pointer;
        }

        .legend {
            width: 33px;
            height: 33px;
            border-radius: 5px;
            margin-left: -15px;
            background: #B7B7B7;
        }

        .legend-bg0 {
            background: #6472FF;
        }

        .legend-bg1 {
            background: #B167D8;
        }

        .legend-bg2 {
            background: #FE6867;
        }

        /*点击显示的图例颜色样式*/
        .bg0 {
            background: #B167D8;
        }

        .bg1 {
            background: #6571FF;
        }

        .bg2 {
            background: #66D3FE;
        }

        .bg3 {
            background: #FE852C;
        }

        .bg4 {
            background: #7CC245;
        }

        .bg5 {
            background: #C28D3D;
        }

        .bg6 {
            background: #EEC842;
        }

        .bg7 {
            background: #80C26A;
        }

        .bg8 {
            background: #0401AA;
        }

        .title {
            width: 150px;
            font-size: 16px !important;
        }

        .secondaryTitle{
            font-weight: 400;
            color: #FDBC0A;
            font-size: 20px;
            text-align: center;
        }

    </style>
</head>

<body>
<div class="row no-margin content1">
    <!-- 饼状图1 -->
    <div id="taxRevenue1"></div>
    <div class="row no-margin">
        <div class="col-xs-6 last-year" align="center">
            <p>去年</p>
            <p>122124</p>
        </div>
        <div class="col-xs-6 growth-rate" align="center">
            <p>增长</p>
            <p>41.36%</p>
        </div>
    </div>
    <div id="legend-content1" class="row no-margin legend-content">
        <%--初始化图例容器--%>
    </div>
</div>

<div class="row no-margin secondaryTitle">
    <div class="col-xs-6"></div>
</div>

<div class="row no-margin content2" hidden>
    <!-- 饼状图2 -->
    <div id="taxRevenue2"></div>
    <div class="row no-margin">
        <div class="col-xs-4 last-year" align="center">
            <p>去年</p>
            <p></p>
        </div>
        <div class="col-xs-4 growth-rate" align="center">
            <p>增长</p>
            <p></p>
        </div>
        <div class="col-xs-4 accounted-rate" align="center">
            <p>占税收总量比重</p>
            <p></p>
        </div>
    </div>
    <div id="legend-content2" class="row no-margin legend-content">
        <%--图例容器--%>
    </div>
</div>


<script src="js/jquery.min.js"></script>
<script src="js/echarts.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- 本页面js -->
<script src="js/indicators/indicators.js"></script>
<script>
    $(function () {
        //页面初始化请求
        $.ajax({
            url: "/index/indicators/taxComplete",
            type: "POST",
            dataType: "json", //返回数据形式为json
            contentType: 'application/json;charset=UTF-8',
            data: JSON.stringify({}),
            success: function (res) {
                if (res.code == "200") {
                    var item = res.data;
                    taxRevenue('taxRevenue1', item);//初始化圆环图表
                    $(".content1 .last-year>p:nth-child(2)").html(item.lastyearIncome + item.units);//初始化去年收入
                    $(".content1 .growth-rate>p:nth-child(2)").html(item.increDecre + "%");//初始化增长率

                    var html = "";
                    for (var i = 0; i < item.lists.length; i++) {
                        var arr = item.lists[i];
                        html += '\
                                <div class="col-xs-3 legend-item"  data-id="' + arr.sysId + '">\
                                        <div class="no-margin">\
                                           <div class="col-xs-2">\
                                                <div class="legend legend-bg' + i + '"></div>\
                                            </div>\
                                            <div class="col-xs-10">\
                                                <p class="title">' + arr.name + '</p>\
                                            </div>\
                                        </div>\
                                        <div class="row no-magrin">\
                                            <div class="col-xs-12">\
                                                <p>本年：<em>' + arr.yearIncome + '' + arr.units + '</em></p>\
                                                <p>去年：<em>' + arr.lastyearIncome + arr.units + '</em></p>\
                                                <p>增长：<em>' + arr.increDecre + '%</em></p>\
                                                <p>占比税收总量占比：<em>' + arr.totalRatio + ' %</em></p>\
                                            </div>\
                                        </div>\
                                    </div> \
                            ';
                    }
                    $("#legend-content1").html(html);
                }
            }
        });

        //点击图例请求
        $("#legend-content1").on("click", ".legend-item", function () {
            var secondaryTitle = $(this).children().children().children(".title").html();//获取二级标题名称
            $(".secondaryTitle").html(secondaryTitle);//赋值
            $(".secondaryTitle").css("display", "block");//显示二级标题
            $(".content2").css("display", "block");//显示二级内容
            var sysId = $(this).data("id");

            $.ajax({
                url: "/index/indicators/queryTertiaryIndustry",
                type: "POST",
                dataType: "json", //返回数据形式为json
                contentType: 'application/json;charset=UTF-8',
                data: JSON.stringify({"sysId": sysId}),
                success: function (res) {
                    if (res.code == "200") {
                        var item = res.data;
                        taxRevenue2('taxRevenue2', item, sysId);//圆环图表
                        $(".content2 .last-year>p:nth-child(2)").html(item.lastYear + item.units);//去年收入
                        $(".content2 .growth-rate>p:nth-child(2)").html(item.increDecre + "%");//增长率
                        $(".content2 .accounted-rate>p:nth-child(2)").html(item.totalRatio + "%");//占税收比重

                        var html = "";
                        for (var i = 0; i < item.data.length; i++) {
                            var arr = item.data[i];
                            html += '\
                                <div class="col-xs-3 legend-item">\
                                        <div class="no-margin">\
                                           <div class="col-xs-2">\
                                                <div class="legend   bg' + i + '"></div>\
                                            </div>\
                                            <div class="col-xs-10">\
                                                <p class="title hidden-font" title="' + arr.name + '">' + arr.name + '</p>\
                                            </div>\
                                        </div>\
                                        <div class="row no-magrin">\
                                            <div class="col-xs-12">\
                                                <p>本年：<em>' + arr.currentYear + '' + arr.units + '</em></p>\
                                                <p>去年：<em>' + arr.lastYear + arr.units + '</em></p>\
                                                <p>增长：<em>' + arr.increDecre + '%</em></p>\
                                                <p>占比税收总量占比：<em>' + arr.totalRatio + ' %</em></p>\
                                            </div>\
                                        </div>\
                                    </div> \
                            ';
                        }
                        $("#legend-content2").html(html);
                    }
                }
            })

        });
    })
</script>
</body>

</html>
